import React, { useEffect, useState } from 'react';
import LocationImage from '@/components/LocationImage';
import { SearchOutlined } from '@ant-design/icons';
import './index.less';
import Layouts from '@/components/Layout';
import { Typography, Pagination, Divider, Input, Spin, Empty } from 'antd';
import { getCountriesList } from '@/service/api/location';
import { CountriesList, CountriesSearch } from '@/types/loaction';
const Countries: React.FC = () => {
  const [countriesData, setCountriesData] = useState<CountriesList[]>([]);
  const [searchCname, setSearchCname] = useState<string>('');
  const [countriesSearchQuery, setCountiesSearchQuery] = useState<CountriesSearch>({
    pageNum: 1,
    pageSize: 9,
    cname: searchCname,
  });
  const [listTotal, setListTotal] = useState<number>(0);
  const [listLoading, setListLoading] = useState<boolean>(false);
  const onSearch = (value: string) => {
    setSearchCname(value);
    setCountiesSearchQuery({
      pageNum: 1,
      pageSize: 9,
      // 不能马上用searchCname,因为是异步的
      cname: value,
    });
  };
  const getCountriesData = async () => {
    try {
      setListLoading(true);
      const { rows, total }: { rows: CountriesList[]; total: number } = await getCountriesList(
        countriesSearchQuery,
      );
      setCountriesData(rows);
      setListTotal(total);
    } finally {
      setListLoading(false);
    }
  };
  const handleChangePage = (page: number, pageSize: number) => {
    setCountiesSearchQuery({
      pageNum: page,
      pageSize,
      cname: searchCname,
    });
  };
  useEffect(() => {
    getCountriesData();
  }, [countriesSearchQuery]);
  return (
    <Layouts>
      <div className="country_warpper">
        <div className="tit_wrapper">
          <Typography.Title level={2} style={{ marginBottom: 0 }}>
            国家
          </Typography.Title>
          <div className="sub_title">旅游信息和冒险理念</div>
          <div className="search_wrapper">
            <Input.Search
              placeholder="请输入国家名称"
              onSearch={onSearch}
              allowClear
              enterButton={
                <span>
                  <SearchOutlined style={{ marginRight: 6 }}></SearchOutlined>搜索
                </span>
              }
            />
          </div>
        </div>
        <Divider />
        <Spin tip="正在玩命加载..." size="large" spinning={listLoading}>
          <div className="data_wrapper">
            {countriesData.map((item) => (
              <LocationImage
                isCity={false}
                countryName={item.cname}
                id={item.id}
                key={item.id}
                coverImg={item.imgUrl}
              ></LocationImage>
            ))}
          </div>
        </Spin>
        <div className="pagination_wrapper">
          {listTotal !== 0 && (
            <Pagination
              current={countriesSearchQuery.pageNum}
              total={listTotal}
              pageSize={countriesSearchQuery.pageSize}
              showTitle
              onChange={handleChangePage}
              showSizeChanger={false}
            />
          )}
          {!listLoading && listTotal === 0 && <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
        </div>
      </div>
    </Layouts>
  );
};
export default Countries;
